<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('年份选择')}`">{{ $t('年份选择') }}</t>
            <li>
                <span class="s-code">disabledDate</span>可以设置日期的禁用状态，参数为当前日期对象
            </li>
            <li>
                <span class="s-code">format</span>可以设置输入框内展示值的格式化规则
            </li>
            <li>
                <span class="s-code">valueFormat</span>可以设置<span class="s-code">v-model</span>绑定值的格式化规则
            </li>
            <li>上述属性并非<span class="s-code-gray">type = "date"</span>特有的配置项，在下方其他示例的控件中也是支持配置的</li>
        </template>
        <div style="display:flex;color:#999;">
            <div style="width: 300px;margin-right:20px;">
                <p style="color:#666;">设置禁用：</p>
                <sib-item v-model="value1" :props="props1" @change="change"></sib-item>
                <p>当前选择的是：{{ value1 }}</p>
            </div>
            <div style="width: 300px;margin-right:20px;">
                <p style="color:#666;">格式化绑定值和展示值：</p>
                <sib-item v-model="value2" :props="props2" @change="change"></sib-item>
                <p>当前选择的是：{{ value2 }}</p>
            </div>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value1 = ref('2023');
        const value2 = ref(+new Date());
        const props1 = reactive({
            type: 'year',
            disabledDate: (date) => date.getTime() > (+new Date()),
        });
        const props2 = reactive({
            type: 'year',
            format: '公元 YYYY 年',
            valueFormat: 'x',
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return {
            value1,
            value2,
            props1,
            props2,
            change,
            templateString: `<template>
    <div style="display:flex;">
        <div style="width: 300px;">
            <p>设置禁用</p>
            <sib-item v-model="value1" :props="props1" @change="change"></sib-item>
            <p>当前选择的是：{{ value1 }}</p>
        </div>
        <div style="width: 300px;">
            <p>格式化绑定值和展示值</p>
            <sib-item v-model="value2" :props="props2" @change="change"></sib-item>
            <p>当前选择的是：{{ value2 }}</p>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value1 = ref('2023');
        const value2 = ref(1609430400000);
        const props1 = reactive({
            type: 'year',
            disabledDate: (date) => date.getTime() > (+new Date()),
        });
        const props2 = reactive({
            type: 'year',
            format: '公元 YYYY 年',
            valueFormat: 'x',
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return { value1, value2, props1, props2, change };
    },
};
<\/script>`,
        };
    },
};
</script>
